<template>
  <div class="container">
    <Header />
    <div class="content">
      <van-swipe :autoplay="3000">
        <van-swipe-item
          v-for="(item, index) in yinyuankang?.slide"  :key="index"    @click="goitemsd(item)"  >
          <img
            :src="item.image"    style="    width: 100%;   height: 9.375rem;   object-fit: cover;    border-radius: .75rem;object-fit: cover; "
          />
        </van-swipe-item>
      </van-swipe>
      <!-- <div class="content-tabs">
          <div  v-for="(item, index) in yinyuankang.gongneng" :key="index" class="content-tablist" >
           <img :src="item.icon"  style="width:40px;height:40px;object-fit: cover;" />
           <div style="font-size:12px;margin-top:8px;text-align:center;">{{item.name}}</div>
          </div>
  </div> -->
      <div
        style="  display: flex;  align-content: center; justify-content: space-between;    margin-top: 8px;  " >
        <div  v-for="(item, index) in indexiconlist" :key="index"    class="content-tablist"
          @click="godizhi(index)"
        >
          <img :src="item.icon"   style="width:64px; height: 48px; object-fit: cover"
          />
          <div style="font-size: 12px; margin-top: 8px; text-align: center">
   {{ item.name }}
          </div>
        </div>
      </div>
      <div
        style="  display: flex;   align-items: center;  margin-top: 1.25rem;   background-color: #f5f5f5; padding: .3125rem 0 .3125rem .625rem;border-radius: 8px;  "
      >
        <img      src="~/static/index/iconslaba.png"    alt=""    style="width: 1rem; height: 1rem; margin-right: .5rem" />
        <div  style="     font-size: .875rem;      overflow: hidden;    text-overflow: ellipsis;   white-space: nowrap;    width: 100%; color: #2E3033; "
          @click="goitemzixunlist(yinyuankang?.news[0]?.id)"
        >
          {{ yinyuankang?.news[0]?.title }}
        </div>
      </div>
      <div class="content-xinyou">
        <div style="font-weight: bold; color: #1a1a1a; font-size: 14px">
          新游榜TOP10
        </div>
        <div
          v-for="(item, index) in yinyuankang?.newgame_top"
          :key="index"
          class="content-xinyou-list"
          @click="goitemlist(item)"
        >
          <div style="display: flex; align-items: center">
            <img
              :src="item.iconss"
              style="width: 2rem; height: 2rem; object-fit: cover"
            />
            <div
              style="display: flex; align-content: center; margin-left: 12px"
            >
              <img   :src="item.icon"   style="width: 3.75rem; height: 3.75rem; object-fit: cover;border-radius: .75rem;
                "
              />
              <div
                style=" display: flex;flex-direction: column;justify-content: left;margin-left: .5rem;text-align: left; max-width: 9.6875rem;
                "
              >
                <div   style="  font-size: .875rem;    color: #1a1a1a;  font-weight: bold;  width: 150px; overflow: hidden; text-overflow: ellipsis;   white-space: nowrap;   "
                >
                  {{ item.name }}
                </div>
                <div
                  style="display: flex; align-items: center; margin: .25rem 0;overflow: hidden; text-overflow: ellipsis;   white-space: nowrap;width: 150px; "
                >
                  <div
                    v-for="(item1, index1) in item.biaoqian"
                    :key="index1"
                    style="  font-size: .8125rem;   color: #aeb0b3;    display: flex;  align-items: center;   "
                  >
                    {{ item1 }}
                    <span
                      v-if="index1 < item.biaoqian.length - 1"
                      style="margin: 0 .25rem; font-weight: bold"
                      >&middot;</span
                    >
                  </div>
                </div>
                <div
                  style=" color: #ff7500; font-size: .75rem; white-space: nowrap;overflow: hidden; text-overflow: ellipsis; width: 150px; "
                >
                  {{ item.summary }}
                </div>
              </div>
            </div>
          </div>
          <div
            style=" color: #ff7500; display: flex;  align-items: center;  flex-direction: column; "
          >
            <div style="font-size: .5rem; font-family: modeng">77TOP</div>
            <div style="font-family: modeng; font-size: 1.0625rem">
              {{ item.point }}
            </div>
          </div>
        </div>
        <div  style=" margin: 0 auto;   display: flex;   align-content: baseline;  margin-top: 1.5rem;   "
        >
          <div  style="color: #aeb0b3; font-size: .875rem; font-size: .75rem"    @click="gobangdan()" >  点击查看完整榜单  </div>
          <img    src="~/static/index/iconright.png"   alt=""   style="     width: .75rem;     height: .75rem;   margin-left: .25rem;   padding-top: .125rem;     "
          />
        </div>
      </div>
      <div
        style=" display: flex;  align-content: center;  justify-content: space-between;margin-top: 1rem; "
      >
        <div style="color: #1a1a1aff; font-size: .875rem; font-weight: bold">
          小编推荐
        </div>
        <!-- <div> <img src="~/static/index/iconright.png" alt=""
            style="width:.75rem;height:.75rem;margin-left:.25rem;padding-top:.125rem;"></div> -->
      </div>
      <div  >
        <van-swipe :autoplay="3000" class="swipe-container" :width="300" :loop="true">
          <van-swipe-item
            v-for="(page, pageIndex) in paginatedItems"
            :key="pageIndex"
            class="swipe-item"
          >
            <div
              class="row"
              v-for="(item, itemIndex) in page"
              :key="itemIndex"
              @click="goitemlist(item)"
            >
              <img :src="item.icon" alt="" class="item-icon" />
              <div class="item-content">
                <div style="display: flex; align-items: center">
                  <div class="item-name">{{ item.name }}</div>
                  <div
                    v-if="item.zhekou"
                    style="
                      color: #e55c67;
                      background-color: #e55c671a;
                      font-size: .5rem;
                      padding: .125rem .25rem;
                      border-radius: .25rem;
                      margin-left: .5rem;
                    "
                  >
                  {{ item.zhekou }}
                  </div>
                </div>

                <div class="item-tags">
                  <div
                    v-for="(item1, index1) in item.biaoqian"
                    :key="index1"
                    style="font-size: .8125rem;color: #aeb0b3;display: flex; align-items: center;"
                  >
                  {{ item1 }}
                    <span
                      v-if="index1 < item.biaoqian.length - 1"  style="margin: 0 .25rem; font-weight: bold" >&middot;</span >
                    </div> 
                    </div>
                <div class="item-point">
                  <img
                    src="~/static/index/mixed.png"
                    alt=""
                    class="point-icon"
                    style=""
                  />
                  <div class="point-value">{{ item.point }}</div>
                </div>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div
        style="
          display: flex;
          align-content: center;
          justify-content: space-between;
        "
      >
        <div style="color: #1a1a1aff; font-size: .875rem; font-weight: bold">
          热门游戏
        </div>
        <!-- <div> <img src="~/static/index/iconright.png" alt=""
            style="width:.75rem;height:.75rem;margin-left:.25rem;padding-top:.125rem;"></div> -->
      </div>
      <div>
        <div class="scroll-container">
          <div

          @click="goitemlist(item)"
            v-for="(item, index) in  yinyuankang?.remen"     :key="index"    class="NaNpxengame"    :style="{ backgroundImage: 'url(' + item.image + ')' }"
          >
            <img
              :src="item.icon"      alt=""      style="   border-radius: .5rem;   width: 3.75rem;   height: 3.75rem;    z-index: 99;    "
            />
            <div
              style="   z-index: 99;    margin: .5rem auto;   font-size: .875rem;  color: #1a1a1a;   font-weight: bold; white-space: nowrap;   overflow: hidden;  text-overflow: ellipsis;   width: 6.25rem;  text-align: center;  " >
              {{ item.name }}
            </div>
            <div class="item-point" style="z-index: 99; margin: 0">
              <img src="~/static/index/mixed.png" alt="" class="point-icon" />
              <div class="point-value">{{ item.point }}</div>
            </div>
            <div
              class="indexButton"
              style="z-index: 9999"
            >
              详情
            </div>
          </div>
        </div>
      </div>
      <div   style="   display: flex;    align-content: center;    justify-content: space-between;    margin-top: 1rem;   "
      >
        <div style="color: #1a1a1aff; font-size: .875rem; font-weight: bold">近期新游 </div>
        <!-- <div> <img src="~/static/index/iconright.png" alt=""
            style="width:.75rem;height:.75rem;margin-left:.25rem;padding-top:.125rem;"></div> -->
      </div>
      <div>
        <van-swipe :autoplay="5000" class="swipe-container" :width="300"   :loop="true" >
          <van-swipe-item
            v-for="(page, pageIndex) in paginatedItems2"
            :key="pageIndex"
            class="swipe-item"
          >
            <div
              class="row"
              v-for="(item, itemIndex) in page"
              :key="itemIndex"
              @click="goitemlist(item)"
            >
              <img :src="item.icon" alt="" class="item-icon" />
              <div class="item-content">
                <div style="display: flex; align-items: center">
                  <div class="item-name">{{ item.name }}</div>
                  <div
                    v-if="item.zhekou"
                    style="        color: #e55c67;     background-color: #e55c671a;    font-size: .5rem;     padding: .125rem .25rem;   border-radius: .25rem;    margin-left: .5rem;    "
                  >
                   {{ item.zhekou }}
                  </div>
                </div>
                <div class="item-tags">
                  <div
                    v-for="(item1, index1) in item.biaoqian"
                    :key="index1"
                    style="font-size: .8125rem;color: #aeb0b3;display: flex; align-items: center;"
                  >
                  {{ item1 }}
                    <span
                      v-if="index1 < item.biaoqian.length - 1"  style="margin: 0 .25rem; font-weight: bold" >&middot;</span >
                    </div> 
                    </div>
                <div class="item-point">
                  <img
                    src="~/static/index/mixed.png"
                    alt=""
                    class="point-icon"
                  />
                  <div class="point-value">{{ item.point }}</div>
                </div>
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div style="margin: 1rem 0">
        <div style="color: #1a1a1aff; font-size: .875rem; font-weight: bold;margin-bottom: 15px;">
          探索更多
        </div>
        <van-pull-refresh v-model="refreshing">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div
              v-for="(item, index) in yinyuankang?.data"
              :key="index"
              class="gamelists"
              @click="goitemlist(item)"
            >
              <div style="display: flex; align-items: center">
                <div
                  style="position: relative; height:128px ; width: 6.6875rem;    border-radius: .75rem; overflow: hidden;flex-shrink:0;box-sizing: border-box;z-index:1;margin-left:2px;"
                :style="{ outline: '2px solid ' + item.mainColor }"
                >
                  <img :src="item.icon" style=" height: 100%; width: 100%; z-index:1;  object-fit:cover;  "
                    @load="getDominantColor(item)"
                  />
                  <div  :style="{ width: '100%', background: item.mainColor , position: 'absolute', bottom: '0',left: '0', zIndex: 99, }" >
                   <div  style=" font-size: .9375rem;  color: #FFFFFF; font-weight: bold; white-space: nowrap; padding: .25rem .5rem;  overflow: hidden; text-overflow: ellipsis; width: 5.25rem; text-align: center; " >
                    {{ item.name }}
                  </div></div>
                  <!-- <canvas ref="myCanvas" id="myCanvas" style="display:none"></canvas> -->
                </div>
                <img :src="item.image" style=" height: 8.25rem; flex:1; border-radius: .75rem;object-fit: cover;margin-left: .5rem;width: 60%; " />
              </div>
              <div style=" display: flex; align-content: center;  justify-content: space-between;margin: .5rem .75rem 0 0; " >
                <div>
                  <div style="display: flex;align-items: center;">
                    <van-rate  v-model="item.points"  color="#FF7700" :size="12"  :allow-half=true  readonly  />
                    <div style="color: #FF7700;font-size:14px ;font-family:modeng ;margin-left: 4px">{{ item.point }}</div>
                  </div>
                 
                  <div   style=" display: flex; align-content: center;  margin: .25rem 0; ">
                    <div
                      v-for="(item1, index1) in item.biaoqian"
                      :key="index1"  style=" font-size: .8125rem; color: #aeb0b3; display: flex; align-items: center; " >
                      {{ item1 }}
                      <span
                        v-if="index1 < item.biaoqian.length - 1"
                        style="margin: 0 .25rem; font-weight: bold"
                        >&middot;</span
                      >
                    </div>
                  </div>
                </div>
                <div
                  style=" color: #ff7500; display: flex;align-items: center; flex-direction: column; " >
                 <img src="~/static/Frame@2x.png" alt="" style="width: 1rem;height: 1rem;">
                  <div style="font-size:11px">
                    想玩
                  </div>
                </div>
              </div>
              <div
                v-if="item.summary!=''"
                :style="summaryStyle()"
                style="  border-radius: .25rem; font-size: .75rem;padding:4px ; margin: 6px 0;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;" >
                {{ item.summary }}
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
    <BottomTab />
  </div>
</template>

<script>
import BottomTab from "~/components/footer.vue";
import Header from "~/components/header.vue";
import icon1 from "~/static/index/index1.png";
import icon2 from "~/static/index/index2.png";
import icon3 from "~/static/index/index3.png";
import icon4 from "~/static/index/Group1000007239@2x.png";
import icon5 from "~/static/index/icon_5@2x.png";
import icon6 from "~/static/index/icon_1@2x.png";
import icon7 from "~/static/index/icon_10@2x.png";
import { nextTick } from 'vue';
export default {
  name: "IndexPage",
  components: {
    Header,
    BottomTab,
  },
  head() {
    return {
      title: this.yinyuankang?.seos?.title,
      meta: [
        { hid: 'description', name: 'description', content: this.yinyuankang?.seos?.description}, 
        { hid: 'keywords', name: 'keywords', content: this.yinyuankang?.seos?.keywords} 
      ]
    }
  },
  data() {
    return {
      yinyuankang: "",
      loading: false,
      finished: false,
      refreshing: false,
      page: 1,
      value:2,
      seos:'',
      indexiconlist: [
        {
          icon: icon4,
          name: "游戏工具",
        },
        {
          icon: icon5,
          name: "游戏论坛",
        },
        {
          icon: icon6,
          name: "每日签到",
        },
        {
          icon: icon7,
          name: "更多福利",
        },
      ],
    };
  },
  computed: {
    paginatedItems() {
  const itemsPerPage = 3;
  let pages = [];
  
  // 获取数据
  const data = this.yinyuankang?.tuijian || [];
  
  for (let i = 0; i < data.length; i += itemsPerPage) {
    pages.push(data.slice(i, i + itemsPerPage));
  }
  return pages;
},
    paginatedItems2() {
      const itemsPerPage = 3;
      let pages = [];
      for (
        let i = 0;
        i < this.yinyuankang?.newgame_later?.length;
        i += itemsPerPage
      ) {
        pages.push(this.yinyuankang?.newgame_later.slice(i, i + itemsPerPage));
      }
      return pages;
    },
  },
  async asyncData({ $axios, req  }) {
    if (process.server) {
      const userAgent = req.headers['user-agent'];
   const isAppleDevice = /iPad|iPhone|iPod/.test(userAgent) && !/Android/.test(userAgent);
   if (isAppleDevice) {
        return {
          yinyuankang: null,
        };
      }
      try {
      const params = {
        ct: "gamenav",
        ac: "home",
        p:10
      };
      const response = await $axios.get("api/app/v3", { params });
      const indexicon = [icon1, icon2, icon3];
      if (
        response.data.newgame_top &&
        Array.isArray(response.data.newgame_top)
      ) {
        response.data.newgame_top.forEach((item, index) => {
          item.iconss = indexicon[index] || "";
        });   
      }
      response.data.data.forEach((item) => {
          item.mainColor = '#474B4C'
        });   
      response.data.data.forEach((item, index) => {
          item.points = item.point/2;
        });
      return { yinyuankang: response.data };
    } catch (error) {
      return { data: null };
    }

    }
  },
   mounted() {
        const params = {
          ct: "gamenav",
          ac: "home",
          p:1
        };
   this.$axios.get("api/app/v3", { params }).then((response)=>{
    const indexicon = [icon1, icon2, icon3];
        if (
          response.data.newgame_top &&
          Array.isArray(response.data.newgame_top)
        ) {
          response.data.newgame_top.forEach((item, index) => {
            item.iconss = indexicon[index] || "";
          });
        }
        response.data.data.forEach((item) => {
          item.mainColor = '#096'
        });   
        response.data.data.forEach((item, index) => {
          item.points = item.point/2;
        });
        this.yinyuankang = response.data;
        this.seos =   this.yinyuankang.seos;
   });
  },
  methods: {
    goitemsd(e){
        if(e.gid ==0){
          if(e.link!=''){
            window.location.href = e.link;
          } 
        }else{
          this.$router.push({
        path: `/shouyou/${e.gid}.html`,
      });
        }
    },
    getDominantColor(e) {
            const img = new Image();
           img.crossOrigin = 'Anonymous';
           img.src = e.icon;

    img.onload = () => {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);

        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
        const data = imageData.data;
        let r = 0, g = 0, b = 0;
        for (let i = 0; i < data.length; i += 4) {
            r += data[i];
            g += data[i + 1];
            b += data[i + 2];
        }
        r = Math.floor(r / (data.length / 4));
        g = Math.floor(g / (data.length / 4));
        b = Math.floor(b / (data.length / 4));
              e.mainColor = `rgb(${r}, ${g}, ${b})`;
       
    };
    },
    godizhi(index) {
      switch (index) {
        case 0:
          this.$nuxt.$router.push("/Hearthstone");
          break;
        case 1:
        this.$nuxt.$router.push({
                   path: '/square',
                   query: {
                           type: 1,
                           }
                          });
          break;
        case 2:
          window.location.href = `${this.$domain}/?ct=wap&ac=signs`;
          break;
        case 3:
        this.$nuxt.$router.push("/fuli");
          // window.location.href = `${this.$domain}/?ct=wap&ac=fuli`;
          break;
        default:
          this.$nuxt.$router.push("/404"); // 默认路由，处理未定义的情况
          break;
      }
    },
    summaryStyle() {
      const colors = ["#FF750014", "#71B95014", "#36C09714"];
      const fontColors = ["#FF7500FF", "#5AB530FF", "#36C097FF"];
      const index = Math.floor(Math.random() * colors.length);
      return {
        backgroundColor: colors[index],
        color: fontColors[index],
      };
    },
    gobangdan() {
      this.$nuxt.$router.push({
            path: '/allgameph.html',
            query: {
              id:3,
            }
          });
    },
    goitemlist(e) {
      this.$router.push({
        path: `/shouyou/${e.id}.html`,
      });
    //   if(e.system_type == 1){
    //     this.$router.push({
    //     path: `/shouyou/${e.id}.html`,
    //   });
    //   }else if(e.system_type == 2){
    //     this.$router.push({
    //     path: `/h5game/${e.id}.html`,
    //   })

    // }else if(e.system_type == 3){
    //   this.$router.push({
    //     path: `/webgame/${e.id}.html`,
    //   })
    // }
  },
    goitemzixunlist(e) {
      this.$router.push({
        path: `/news/${e}.html`,
      });
    },
    onLoad() {
      setTimeout(() => {
        if (this.page <= this.yinyuankang.max_p) {
          this.page++;
          this.zhutilist();
        } else {
          this.finished = true;
        }
      }, 500);
    },
    async zhutilist() {
      const params = {
        ct: "gamenav",
        ac: "home",
        p: this.page,
      };
      const response = await this.$axios.get("api/app/v3", { params });  
        response.data.data.forEach((item, index) => {
          item.points = item.point/2;
        });
      this.yinyuankang.data = this.yinyuankang.data.concat(response.data.data);
      this.loading = false;
    },
  },
};
</script>

<style>
body {
  background: #f7f8fa;
  font-size: 16px;
  /* 默认字体大小 */
}

.my-swipe {
}

.my-swipe .van-swipe-item {
  border-radius: .75rem;
}

.content {
  margin: 0 .75rem;
}

.van-swipe__indicators {
  position: absolute;
  bottom: .75rem;
  left: 90%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.van-swipe__indicator {
  width: .375rem;
  height: .375rem;
  background-color: #ffffff;
  border-radius: 100%;
  -webkit-transition: opacity 0.2s, background-color 0.2s;
  -webkit-transition: opacity 0.2s, background-color 0.2s;
  transition: opacity 0.2s, background-color 0.2s;
}

.content-tabs {
  display: flex;
  align-content: center;
  justify-content: space-between;
  overflow-x: auto;
  white-space: nowrap;
  margin-top: .75rem;
  -webkit-overflow-scrolling: touch;
}

.content-tabs::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar */
}

.content-tablist {
  display: flex;
  width: 4rem;
  height: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  align-items: center;
}

.content-xinyou {
  margin-top: 1.25rem;
  background: #ffffff;
  border-radius: .75rem;
  display: flex;
  padding: 1.25rem;
  flex-direction: column;
  justify-content: center;
}

.content-xinyou-list {
  display: flex;
  align-items: center;
  margin-top: .9375rem;
  justify-content: space-between;
  justify-items: center;
}

.swipe-container {
}

.swipe-item {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.row {
  display: flex;
  margin: 0 0 .9375rem 0;
  /* 行间距 */
}

.item-icon {
  width: 3.75rem;
  height: 3.75rem;
  background: rgba(0, 0, 0, 0.1);
  border-radius: .75rem;
}

.item-content {
  margin-left: .75rem;
  flex: 1;
}

.item-name {
  color: #1a1a1a;
  font-size: .875rem;
  font-weight: bold;
  width: 160px;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis; 
}

.item-tags {
  display: flex;
  align-items: center;
  margin: .25rem 0;
  width: 100%;
  
}

.item-tag {
  color: #aeb0b3;
  font-weight: 500;
  font-size: .8125rem;
  margin-right: .9375rem;
}

.item-point {
  display: flex;
  align-items: flex-end;
  margin-top: .25rem;
}

.point-icon {
  width: 1rem;
  height: 1rem;
}

.point-value {
  color: #ff7500;
  font-size: .75rem;
}

.NaNpxengame {
  height: 11.25rem;
  border-radius: 8px;
  margin-top: 1rem;
  background-position: center top;
  background-repeat: no-repeat;
  display: flex;
  padding: .625rem 1.25rem;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-right: 1rem;
  position: relative;
  z-index: 1;
  width: 7.5rem;
  background-size: 97% 97%;
}

.NaNpxengame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), #fff 40%);
  border-radius: .75rem;
  z-index: 2;
}

.indexButton {
  width: 3.75rem;
  height: 1.625rem;
  border-radius: 4.25rem;
  border: .0625rem solid #2e3033;
  text-align: center;
  line-height: 1.625rem;
  font-size: .75rem;
  margin-top: .75rem;
  font-weight: bold;
}

.scroll-container {
  display: flex;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.scroll-container::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, and Opera */
}

.gamelists {
  border-radius: .75rem;
  margin-bottom: 24px;
}
.van-swipe__track{

}
</style>
